<template>
    <div class="divFlex">
        <div :id="'echartTabs'+tabsNum"></div>
        <div>
            <div class="center">
            <p class="pNum">23,101.55元丨100.00%</p>
            <p class="pTitle">{{tabsTitle}}可下调空间</p>
            </div>
        </div>
        <div>
            <div class="center">
            <p class="pNum">79个丨占比100.00%</p>
            <p class="pTitle">{{tabsTitle}}需下调科室</p>
            </div>
        </div>
        <div>
            <div class="center">
            <p class="pNum">0个丨占比100.00%</p>
            <p class="pTitle">可以保持不变科室</p>
            </div>
        </div>
        <div>
            <div class="center">
            <p class="pNum">前0个科室</p>
            <p class="pTitle">可达目标80%以上</p>
            </div>
        </div>
    </div>
</template>

<script>
    const echarts = require("echarts")
    export default {
        name: "tabsContent",
        props: {
            tabsNum:Number,
            tabsTitle:String,
        },

        data() {
            return {
                feeData:[16000,200]
            }
        },
        created(){

        },
        mounted () {
            this.echartTabs()
        },
        methods: {
            echartTabs(){
                var myChart = echarts.init(document.getElementById('echartTabs'+this.tabsNum))
                myChart.setOption({
                    color: ['#5467E6','#55EFD3'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                            type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                        }
                    },
                    grid: {
                        left: '10%',
                        right: '14%',
                        top:'14%',
                        bottom: '14%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            data: [this.tabsTitle,'目标'+this.tabsTitle],
                            axisLine: {
                                color: '#BBC1E3',
                                show: true
                            },
                            axisTick: {
                                show: false
                            },
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value',
                            name:'元',
                            nameTextStyle: {
                                color: '#484D78',
                                fontSize: 12,
                                padding: [0, 0, 2, -30]
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: true,
                            },
                        }
                    ],
                    series: [
                        {
                            name: 'tabsTitle',
                            type: 'bar',
                            barWidth: '40%',
                            data: this.feeData,
                            itemStyle: {
                                normal: {
                                    //这里是重点
                                    color: function(params) {
                                        //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                        var colorList = ['#5467E6','#55EFD3'];
                                        return colorList[params.dataIndex]
                                    }
                                }
                            }
                        },
                ]
                })
            }
        }
    }
</script>

<style scoped>
    .divFlex{ display: flex}
    .divFlex>div{flex:1;height:200px; display: flex; align-items: center;flex-flow: wrap;}
    .center{}
    .pNum{font-size: 16px;color: #4B82FB;line-height: 16px; text-align: left; margin-bottom: 10px;}
    .pTitle{text-align: left;font-size: 12px;color: #484D78;line-height: 12px;}
</style>
